<template>
  <div>
    <div id="bg">
      <div id="container">
        <div id="second">
          <div id="four">
            <h4>热门排行</h4>
            <hr style="border-color: #FCFCFC;">
            <ul>
              <li class="lidd">
                <el-tag type="danger" size="mini" effect="dark">1</el-tag>
                <el-tooltip class="item" effect="light" content="什么？怎么就一张？没了！那就快来扩列吧朋友们！" placement="bottom-start">
                  <a href="xxx">什么？怎么就一张？没了...</a>
                </el-tooltip>
                <a href="xxx">邬西SA</a>
              </li>
              <li class="lidd">
                <el-tag type="warning" size="mini" effect="dark">2</el-tag>
                <el-tooltip class="item" effect="light" content="【王者荣耀 嫦娥原皮cos】预告 团圆佳节 嫦..." placement="bottom-start">
                  <a href="xxx">【王者荣耀 嫦娥原皮cos】...</a>
                </el-tooltip>
                <a href="xxx">coser云歌</a>
              </li>
              <li class="lidd">
                <el-tag type="success" size="mini" effect="dark">3</el-tag>
                <el-tooltip class="item" effect="light" content="东方project｜博丽灵梦" placement="bottom-start">
                  <a href="xxx">东方project｜博丽灵梦</a>
                </el-tooltip>
                <a href="xxx">物部弥生</a>
              </li>
              <li class="lidd">
                <el-tag type="info" size="mini" effect="dark">4</el-tag>
                <el-tooltip class="item" effect="light" content="【王者荣耀 嫦娥原皮cos】预告 团圆佳节 嫦..." placement="bottom-start">
                  <a href="xxx">EVA｜渚薰</a>
                </el-tooltip>
                <a href="xxx">物部弥生</a>
              </li>
              <li class="lidd">
                <el-tag type="info" size="mini" effect="dark">5</el-tag>
                <el-tooltip class="item" effect="light" content="【王者荣耀 嫦娥原皮cos】预告 团圆佳节 嫦..." placement="bottom-start">
                  <a href="xxx">【王者荣耀 嫦娥原皮cos】...</a>
                </el-tooltip>
                <a href="xxx">邬西SA</a>
              </li>
              <li class="lidd">
                <el-tag type="info" size="mini" effect="dark">6</el-tag>
                <el-tooltip class="item" effect="light" content="【王者荣耀 嫦娥原皮cos】预告 团圆佳节 嫦..." placement="bottom-start">
                  <a href="xxx">【王者荣耀 嫦娥原皮cos】...</a>
                </el-tooltip>
                <a href="xxx">邬西SA</a>
              </li>
              <li class="lidd">
                <el-tag type="info" size="mini" effect="dark">7</el-tag>
                <el-tooltip class="item" effect="light" content="【王者荣耀 嫦娥原皮cos】预告 团圆佳节 嫦..." placement="bottom-start">
                  <a href="xxx">【王者荣耀 嫦娥原皮cos】...</a>
                </el-tooltip>
                <a href="xxx">邬西SA</a>
              </li>
              <li class="lidd">
                <el-tag type="info" size="mini" effect="dark">8</el-tag>
                <el-tooltip class="item" effect="light" content="【王者荣耀 嫦娥原皮cos】预告 团圆佳节 嫦..." placement="bottom-start">
                  <a href="xxx">【王者荣耀 嫦娥原皮cos】...</a>
                </el-tooltip>
                <a href="xxx">邬西SA</a>
              </li>
              <li class="lidd">
                <el-tag type="info" size="mini" effect="dark">9</el-tag>
                <el-tooltip class="item" effect="light" content="【王者荣耀 嫦娥原皮cos】预告 团圆佳节 嫦..." placement="bottom-start">
                  <a href="xxx">【王者荣耀 嫦娥原皮cos】...</a>
                </el-tooltip>
                <a href="xxx">邬西SA</a>
              </li>
            </ul>
          </div>
          <div id="three">
            <div class="three-one">
              <img src="../../assets/a1.png" alt="">
              <div class="three-onefd">
                <h3>三次元</h3>
                <p>1、本区主要用于发布于二次元不太相关的内容，可以是自己身边的日常，某件物品的推荐</p>
                <p>2、禁止在本区发布政治、低俗、媚俗、广告等内容，违者删帖处理，严重者将禁号处理</p>
                <p>3、禁止发布灌水、刷屏发帖等无意义的帖子和评论内容</p>
              </div>
            </div>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/home/community' }">社区首页</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="three-two">
              <ul>
                <li class="lida">
                  <div class="aone">
                    <a class="title">看完带备注加,老婆们</a>
                    <p class="bztime">2023-03-28 20:24:38</p>
                    <p class="neirong">看完带备注加,老婆们</p>
                    <div class="atwo">
                      <img src="https://img.nyato.com/data/upload/2023/0328/20/6422dc854bd23.jpg!360x360cut" alt="">
                      <img src="https://img.nyato.com/data/upload/2023/0324/17/641d6bdc645c1.png!180x180cut" alt="">
                    </div>
                  </div>
                </li>
                <hr style="border-color: #FCFCFC;">
                <li class="lida">
                  <div class="aone">
                    <a class="title">出出出</a>
                    <p class="bztime">2023-03-28 20:24:38</p>
                    <p class="neirong">#二手交易#装师练手产物，（不是我）不太喜欢了。我想自己做。两...</p>
                    <div class="atwo">
                      <img src="https://img.nyato.com/data/upload/2023/0328/20/6422d9c449f2c.jpg!360x360cut" alt="">
                      <img src="https://img.nyato.com/data/upload/2023/0324/17/641d6bdc645c1.png!180x180cut" alt="">
                    </div>
                  </div>
                </li>
                <hr style="border-color: #FCFCFC;">
              </ul>
            </div>
          </div>
          
        </div>
      </div>
    </div>   
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style>
  .el-main{
    margin: 0;
    padding: 0;
  }
  #bg {
    background-color: #F5F5F5;
  }
  #container {
    width: 1200px;
    margin: 0 auto;
  }
  #second {
    padding: 20px 0 0;
  }
  #second #three {
    padding: 0 20px 0;
    width: 68%;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
  }
  #second #three .three-one {
    padding-top: 20px;
    height: 100px;
  }
  #second #three .three-one img {
    width: 80px;
    height: 80px;
    float: left;
  }
  #second #three .three-onefd {
    float: left;
    margin-left: 15px;
  }
  #second #three .three-onefd h3 {
    color: #F39800;
    margin-bottom: 10px;
  }
  #second #three .three-onefd p {
    color: #8E8E8E;
    font-size: 12px;
  }
  #second #three .el-breadcrumb {
    height: 30px;
    width: 785px;
    background-color: #F5F5F5;
    align-items: center;
    line-height: 30px;
    padding-left: 30px;
    border-radius: 8px;
  }
  #second #three .el-breadcrumb__inner {
    cursor: pointer;
    color: #F39800;
    font-weight: bold;
  }
  #second ul .lida {
    list-style: none;
    padding: 15px 0;
  }
 
  #second #three ul .lida .aone a {
    font-size: 15px;
  }
  #second #three ul .lida .aone .neirong {
    color: #8E8E8E;
    font-size: 12px;
    margin-top: 4px;
  }
  #second #three ul .lida .aone .bztime {
    color: #8E8E8E;
    font-size: 12px;
    float: right;
  }
  #second #three ul .lida .aone .atwo {
    margin-top: 10px;
  }
  #second #three ul .lida .aone .atwo img {
    height: 80px;
    width: 80px;
  }
  #second #three ul .lida .aone .atwo img:nth-child(n+2) {
    margin-left: 10px;
  }
  #second #four {
    float: right;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
    width: 26%;
    padding: 10px;
  }
  #second #four h4 {
    color: #F39800;
    margin-bottom: 10px;
  }
  #second #four .lidd {
    list-style: none;
    padding: 5px 0;
  }
  #second #four .lidd .el-tooltip {
    margin-left: 10px;
    width: 200px;
    display: inline-block;
    font-size: 14px;
    color: black;
  }
  #second #four .lidd a{
    text-decoration: none;
    color: #BEBEBE;
    font-size: 12px;
  }

</style>